<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'

const route = useRoute()
const router = useRouter()

// 处理哈希模式下的路径格式
const normalizedPath = route.path.startsWith('#') 
    ? route.path.substring(1) 
    : route.path;
const defaultActive = ref(normalizedPath);
// 重定向
onMounted(() => {
    if (route.path === '/' || route.path === '/#') {
        router.push('/N1/i1')
    }
})
console.log("路由path:", defaultActive.value);


import { storeToRefs } from 'pinia'
import useSidebarStatusInfoStore from '@/stores/sidebarStatus'
const sidebarStatusInfo = useSidebarStatusInfoStore();
const { isCollapse } = storeToRefs(sidebarStatusInfo)

</script>

<template>
    <el-menu active-text-color="#ffd666" background-color="#324157" class="el-menu-vertical-demo"
        :default-active="defaultActive" text-color="#fff" router :collapse="isCollapse">
        <h1 class="logo">
            <el-icon size="6vh">
                <ElementPlus />
            </el-icon>
            <span v-show="!isCollapse">后台管理系统</span>
        </h1>

        <el-sub-menu index="/N1">
            <template #title>
                <el-icon>
                    <Location />
                </el-icon>
                <span>Navigator One</span>
            </template>
            <el-menu-item index="/N1/i1">基础表格aa</el-menu-item>
            <el-menu-item index="/N1/i2">item two</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="/N2">
            <template #title>
                <el-icon>
                    <Cpu />
                </el-icon>
                <span>Navigator Two</span>
            </template>
            <el-menu-item index="/N2/i1">item one</el-menu-item>
            <el-menu-item index="/N2/i2">item two</el-menu-item>
        </el-sub-menu>

        <el-menu-item index="/N3">
            <el-icon>
                <OfficeBuilding />
            </el-icon>
            <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="/N4">
            <el-icon>
                <document />
            </el-icon>
            <span>Navigator Four</span>
        </el-menu-item>
    </el-menu>
</template>

<style lang="scss" scoped>
.logo {
    width: 100%;
    margin: 2vh auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #69c0ff;
}
</style>